.setting {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 20px 40px 200px 40px;
	gap: 40px;
	.mask {
		position: fixed;
		inset: 0;
		background-color: rgba(#000000, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		&.hiden {
			display: none;
		}
	}
	.card {
		font-family: '思源黑体';
		width: 100%;
		padding: 40px 0;
		border-radius: 20px;
		box-shadow: 0 0 20px 5px #eee;
	}
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40px;
		.info {
			display: flex;
			align-items: center;
			gap: 20px;
			flex: 1;
			.pic {
				height: 100px;
				width: 100px;
				border-radius: 50%;
			}
			.nickname {
				font: 600 34px / 34px '思源黑体';
			}
		}
		.more {
			width: 40px;
			height: 40px;
		}
	}
	.setting {
		padding: 0;
		gap: 2px;
		background-color: #efefef;
	}
	.logout {
		padding: 30px 0;
		text-align: center;
		color: brown;
		font-size: 34px;
	}
	.seeting-warp {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 40px;
		width: 100%;
		height: 100px;
		background-color: #fff;
		&:first-of-type {
			border-top-right-radius: 20px;
			border-top-left-radius: 20px;
		}
		&:last-of-type {
			border-bottom-right-radius: 20px;
			border-bottom-left-radius: 20px;
		}
		.more {
			width: 120px;
			.img {
				margin-left: 20px;
			}
			.panel {
				&.hiden {
					display: none;
				}
				position: absolute;
				top: 0;
				left: 0;
				width: 41vw;
				box-shadow: 0 0 10px 5px #eee;
				border-radius: 20px;
				background-color: #efefef;
				display: flex;
				flex-direction: column;
				gap: 1px;
				overflow: hidden;
				transform: translateX(calc(-100% - 30px));
				.option {
					padding: 20px 0;
					width: 100%;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 20px;
					.img {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
	.notify {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 40px;
		width: 100%;
		height: 48px;
	}
	.seeting-warp,
	.notify {
		.left {
			display: flex;
			height: 100%;
			width: 100%;
			align-items: center;
			gap: 20px;
			font-size: 30px;
			.icon-warp {
				width: 48px;
				height: 48px;
				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
		.more {
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			.img {
				width: 40px;
				height: 40px;
			}
		}
	}
}
